<template>
	<view class="empire-cart">
		<EmpireCartItem
			v-for="(item, key) in list"
			:key="key"
			v-model:checked="item.checked"
			v-model:number="item.number"
			:src="item.profile"
			:title="item.name"
			:discount="item.discount"
			:price="item.price"
			:editable="editable"
			@change="handleChange"
			@remove="handleRemove(item.serial)"
		/>
		<EmpireCartSummary v-if="showSummary"></EmpireCartSummary>
	</view>
</template>

<script setup>
import EmpireCartItem from './empire-cart-item.vue';
import EmpireCartSummary from './empire-cart-summary.vue';
import { computed, ref } from 'vue';

const props = defineProps({
	editable: {
		type: Boolean,
		default: false
	},
	showSummary: {
		type: Boolean,
		default: false
	},
	list: {
		type: Array,
		default: []
	}
});
const emits = defineEmits(['change', 'remove']);
const checkList = computed(() => {
	return props.list.map((item) => {
		const price = item.price || 0;
		const number = item.number || 1;
		return {
			number: item.number,
			value: Math.round(price * number * 100) / 100,
			checked: item.checked
		};
	});
});

function handleChange() {
	emits('change', checkList.value);
}
function handleRemove(serial) {
	emits('remove', serial);
}
</script>

<style lang="scss" scoped>
.empire-cart {
	background-color: #fff;
	border-radius: 32rpx;
	margin: 20rpx;
}
</style>
